<template>
  <div>
    <topBar/>
    <el-row>
      <el-col :span="8" :offset="3"> <el-image class="c" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image></el-col>
      <el-col :span="8" :offset="3"><el-steps  :active="1" finish-status="success">
        <el-step title="购物车"></el-step>
        <el-step title="确认订单"></el-step>
        <el-step title="支付"></el-step>
        <el-step title="评价"></el-step>
      </el-steps></el-col>
    </el-row>
    <el-col :span="19" :offset="3">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h1>确认订单</h1>
        </div>
        <div   class="text item">
          <el-card>
            <div slot="header" >
              <span>选择收获地址</span>
            </div>
            <el-row :gutter="12">
              <el-col :span="8">
                <el-card shadow="always" class="box" >
                   <p>四川省 成都市 高新区</p>
                   <p>中和镇xxx街道111111111111路</p>
                   <p>张明璐</p>
                   <p>150846211</p>
                  <el-button>编辑</el-button>
                  <el-button>删除</el-button>
                </el-card>
              </el-col>
              <el-col :span="8" >
                <el-card shadow="" class="box">
                  <el-button style="margin-left: 50%;margin-top: 8%" @click="addExceptPrice">+</el-button>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <div slot="header" >
              <span>选择付款方式</span>
            </div>
            <div v class="text item">
              <div>
                <el-radio-group v-model="radio1">
                  <el-radio-button label="1">
                    <!--<el-image-->
                    <!--style="width: 100px; height: 100px"-->
                     <!--src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"-->
                     <!--fit="fit"></el-image>-->
                    货到付款
                  </el-radio-button>
                  <el-radio-button label="2">支付宝</el-radio-button>
                  <el-radio-button label="3">微信</el-radio-button>
                  <!--<el-radio-button label="4"></el-radio-button>-->
                </el-radio-group>
              </div>
            </div>
          </el-card>
          <el-card>
            <div slot="header" >
              <span>确认商品信息</span>
            </div>
            <div  class="text item">
              <el-table
                :data="dataTable"
                :summary-method="getSummaries"
                show-summary
                style="width: 100%">
                <el-table-column
                  prop="goods"
                  label="商品"
                  width="380">
                  <template slot-scope="scope">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="scope.row.goods.url"
                      fit="contain"></el-image>
                    <span style="margin-left: 10px">{{ scope.row.goods.des }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="info"
                  label="商品信息"
                  width="380">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="单价" width="180">
                </el-table-column>
                <el-table-column
                  prop="count"
                  label="数量" width="200">
                  <template slot-scope="scope">
                    <span  >{{scope.row.count}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sub"
                  label="小计">
                  <template slot-scope="scope">
                    <span>￥{{scope.row.sub}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-col class="h">  <el-checkbox v-model="checked">索要发票</el-checkbox></el-col>
              <div v-if="checked" >

              <el-col :span="2"  class="h">  <h3>发票抬头：</h3></el-col>
              <el-col :span="3" class="h">
                <el-radio-group v-model="radio">
                  <el-radio :label="1">个人</el-radio>
                  <el-radio :label="2">公司</el-radio>
                </el-radio-group>
              </el-col>
              <el-col :span="4" > <el-input :disabled="radio!==2" type="text" size="mini" v-model="company" placeholder="请输入单位名称"></el-input></el-col>
              </div>


              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="备注"
                v-model="order.remarks">
              </el-input>
            </div>
          </el-card>
          <el-button type="danger">提交订单</el-button>
        </div>
      </el-card>
    </el-col>


    <myfooter/>

    <addressdialog :s="address"/>
  </div>
</template>

<script>
  import topBar from '@/components/topBar'
  import myfooter from '@/components/myfooter'
  import addressdialog from '@/components/addressdialog'
  import {toMoney }from '@/utils/number'
  import { mapGetters } from 'vuex'
  export default {
    name: "index",
    components:{ topBar,myfooter,addressdialog},
    computed: {
      ...mapGetters([
        'address'
      ])
    },
    data() {
      return {
        webintro2:null,
        checked:false,
        radio1:1,
        company:null,
        ele:'',
        show:false,
        add_address:{
          consignee:null,
          province:null,
          city:null,
          area:null,
          street:null,
          phone:null,
        },
        radio:'1',
        order:{},
        num: 1,
        dataTable:[
          {
            goods:{
              url:"http://img.tea7.com/0012961_0.jpeg?x-oss-process=image/resize,w_300",
              des:"武夷原产 全芽黄芽金骏眉 2號150g"
            },
            info:"xxx",
            price:'99.00',
            count:1,
            sub:1,
          },
          {
            goods:{
              url:"http://img.tea7.com/0012961_0.jpeg?x-oss-process=image/resize,w_300",
              des:"daaaa"
            },
            info:"CCC",
            price:'22.00',
            count:1,
            sub:1,
          }
        ]
      }
    },
    methods: {
      handleChange(scope){
        scope.row.sub=toMoney(scope.row.count * scope.row.price)
      },
      addExceptPrice () {
        this.$store.dispatch('set_show', true)
        console.log(this.$store.getters.address)
        // this.ele++
        // this.itemArr.push(this.ele)
      },

      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        console.log(columns)
        console.log(data)
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if(index<4){
            sums[index] = '';
          }else {
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  if(index===3) {
                    return Number(prev) + Number(curr)
                  }
                  return toMoney(Number(prev) + Number(curr))
                } else {
                  return prev
                }
              }, 0)
              if(index===3){
                sums[index]  ='商品'+ sums[index]+' 个'
              }else {
                sums[index]  = '总计'+sums[index] +' 元(不包含运费)'
              }
            } else {
              sums[index] = ''
            }
          }
        });

        return sums;
      }
    }
  }
</script>

<style scoped>
  .c{
    height: 60px;
  }
  .h{
    min-height: 40px;
  }  .box{
    min-height: 175px;
  }
  .box-card{
    min-height: 700px;
  }
</style>
